<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Atelier Colorschemes - Syntax highlighting</title>
    <link href="../assets/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="../assets/css/app.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <link href="../assets/css/forest.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Bram de Haan">
    <meta name="robots" content="index, follow">  <meta name="description" content="Colection of colorschemes for Code Syntax highlighting"/>
    <link rel="author" href="https://plus.google.com/+BramdeHaan/posts">
    </head>
    <body class="as-index">

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="NewTheme" viewBox="0 0 80 50">
<g transform="rotate(8 32 32)">
<g>
<rect x="38" fill="#c55000" width="3" height="6"/>
<rect x="38" y="44" fill="#c55000" width="3" height="6"/>
<rect x="74" y="22" fill="#c55000" width="6" height="3"/>
<rect y="22" fill="#c55000" width="6" height="3"/>
<rect x="64.713" y="3.808" transform="matrix(-0.53 -0.848 0.848 -0.53 95.5307 66.5651)" fill="#c55000" width="3" height="6"/>
<rect x="11.286" y="37.192" transform="matrix(-0.5298 -0.8481 0.8481 -0.5298 -14.5262 72.3317)" fill="#c55000" width="3" height="6"/>
<rect x="11.286" y="3.808" transform="matrix(0.5298 -0.8481 0.8481 0.5298 0.2381 14.0448)" fill="#c55000" width="3" height="6"/>
<rect x="64.712" y="37.192" transform="matrix(0.5298 -0.8481 0.8481 0.5298 -2.956 75.0528)" fill="#c55000" width="3" height="6"/>
</g>
<g>
<path fill="#b30" d="M30,30l-3.5-8v8H24V18h3l3.5,8v-8H33v12H30z"/>
<path fill="#b30" d="M37.5,19.999V23H41v2h-3.5v3h4.682v2H35V18h7v1.999H37.5z"/>
<path fill="#b30" d="M52,30l-1.75-9l-1.75,9h-3L43,18h2.606L47,27l2-9h2.5l2,9l1.5-9h2.5l-2,12H52z"/>
</g>
</g>
</symbol>
</svg>

    <header id="header" class="row header">
      <div class="large-4 columns">
        <h1 class="repo-title"><a href="http://atelierbram.github.io/syntax-highlighting/">Syntax Highlighting <span class="tagline sh-small">colorschemes</span></a></h1>

      </div>
      <nav class="large-8 columns">
        <ul class="inline-list right">
          <li><a href="../chrome-devtools/">Chrome Devtools</a></li>
          <li><a href="../lab">Lab</a></li>
          <li><a href="../prism">Prism</a></li>
          <li><a href="../duotones">Duotones</a></li>
          <li><a href="/" data-dropdown="drop-atelierschemes" class="button dropdown dropdown-atelier">Atelier Schemes<span data-dropdown="drop-atelierschemes"></span></a><br>
          <ul id="drop-atelierschemes" class="f-dropdown small" data-dropdown-content>
            <li class="is-selected"><a href="#" class="is-selected">index - overview</a></li>
            <li><a href="forest">Forest</a></li>
            <li><a href="plateau">Plateau</a></li>
            <li><a href="heath">Heath</a></li>
            <li><a href="cave">Cave</a></li>
            <li><a href="sulphurpool">Sulphurpool</a></li>
            <li><a href="lakeside">Lakeside</a></li>
            <li><a href="savanna">Savanna</a></li>
            <li><a href="seaside">Seaside</a></li>
            <li><a href="estuary">Estuary</a></li>
            <li><a href="dune">Dune</a></li>
            <li><a href="output">output formats</a></li>
          </ul>
          </li>

        </ul>
      </nav>
    </header>

    <div class="row outer-wrap">
      <article class="article article--demo">

        <div id="wrap" class="inner-wrap">
          <h2>Atelier <small>colorschemes</small></h2>

          <p><a href="demo/changes-03-2015.html">Updates!</a></p>
          <p>
          For the construction of these colorschemes, <a href="http://ethanschoonover.com/solarized">Solarized colorscheme</a> stood as a model, and  <a href="https://github.com/chriskempson/base16-builder">Base16 Builder</a> was a building tool. Like in <a href="https://github.com/altercation/solarized/">Solarized</a>, the colorschemes come in a light &#8211; and in a dark background version. It&#8217;s really just variations on the same idea, but each with it&#8217;s own color-value relations, interdependent on each other and their base (background-)color, giving each colorscheme it’s own character.

          </p>

          <h3 id="forest"><a href="forest">Forest</a></h3>
          <p>
          Base color for Forest is orange, and the idea is to have brownish colors for the background, not unlike a colorscheme like <a href="http://joebergantine.com/projects/color-schemes/birds-of-paradise/">&#8220;Birds of Paradise&#8221;</a>, but a bit muddier on the browns, less red and more greyed out, like clay.
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect x="0" y="0" width="150" height="150" fill="#1b1918" /><rect x="150" y="0" width="150" height="150" fill="#2c2421" /><rect x="300" y="0" width="150" height="150" fill="#68615e" /><rect x="450" y="0" width="150" height="150" fill="#766e6b" /><rect x="600" y="0" width="150" height="150" fill="#9c9491" /><rect x="750" y="0" width="150" height="150" fill="#a8a19f" /><rect x="900" y="0" width="150" height="150" fill="#e6e2e0" /><rect x="1050" y="0" width="150" height="150" fill="#f1efee" /><rect x="0" y="150" width="150" height="150" fill="#c38418" /><rect x="150" y="150" width="150" height="150" fill="#df5320" /><rect x="300" y="150" width="150" height="150" fill="#f22c40" /><rect x="450" y="150" width="150" height="150" fill="#c33ff3" /><rect x="600" y="150" width="150" height="150" fill="#6666ea" /><rect x="750" y="150" width="150" height="150" fill="#407ee7" /><rect x="900" y="150" width="150" height="150" fill="#3d97b8" /><rect x="1050" y="150" width="150" height="150" fill="#7b9726" /></g></svg>

          <p>
          More <a href="forest/">information</a> on code, color-values and more &hellip;.
          </p>

          <h3 id="plateau" class="mtm"><a href="plateau">Plateau</a><svg class="new-theme-svg"><use xlink:href="#NewTheme" /></svg></h3>
          <p>
          Base color for Plateau is red, and here the background-colors have these chocolate brown/grey colors for the background, while the “color-wheel colors” are quite desaturated. A warm palette; no real green in here, (<i>see also “Cave”</i>).
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect x="0" y="0" width="150" height="150" fill="#1b1818" /><rect x="150" y="0" width="150" height="150" fill="#292424" /><rect x="300" y="0" width="150" height="150" fill="#585050" /><rect x="450" y="0" width="150" height="150" fill="#655d5d" /><rect x="600" y="0" width="150" height="150" fill="#7e7777" /><rect x="750" y="0" width="150" height="150" fill="#8a8585" /><rect x="900" y="0" width="150" height="150" fill="#e7dfdf" /><rect x="1050" y="0" width="150" height="150" fill="#f4ecec" /><rect x="0" y="150" width="150" height="150" fill="#a06e3b" /><rect x="150" y="150" width="150" height="150" fill="#b45a3c" /><rect x="300" y="150" width="150" height="150" fill="#ca4949" /><rect x="450" y="150" width="150" height="150" fill="#bd5187" /><rect x="600" y="150" width="150" height="150" fill="#8464c4" /><rect x="750" y="150" width="150" height="150" fill="#7272ca" /><rect x="900" y="150" width="150" height="150" fill="#5485b6" /><rect x="1050" y="150" width="150" height="150" fill="#4b8b8b" /></g></svg>

          <p>
          More <a href="plateau/">information</a> on code, color-values and more &hellip;.
          </p>

          <h3 id="heath" class="mtm"><a href="heath">Heath</a></h3>
          <p>
          Base color for Heath is magenta, and here the background-colors have these cool-red colors for the background, but then obviously toned down quite a bit &hellip;.
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect x="0" y="0" width="150" height="150" fill="#1b181b" /><rect x="150" y="0" width="150" height="150" fill="#292329" /><rect x="300" y="0" width="150" height="150" fill="#695d69" /><rect x="450" y="0" width="150" height="150" fill="#776977" /><rect x="600" y="0" width="150" height="150" fill="#9e8f9e" /><rect x="750" y="0" width="150" height="150" fill="#ab9bab" /><rect x="900" y="0" width="150" height="150" fill="#d8cad8" /><rect x="1050" y="0" width="150" height="150" fill="#f7f3f7" /><rect x="0" y="150" width="150" height="150" fill="#bb8a35" /><rect x="150" y="150" width="150" height="150" fill="#a65926" /><rect x="300" y="150" width="150" height="150" fill="#ca402b" /><rect x="450" y="150" width="150" height="150" fill="#cc33cc" /><rect x="600" y="150" width="150" height="150" fill="#7b59c0" /><rect x="750" y="150" width="150" height="150" fill="#516aec" /><rect x="900" y="150" width="150" height="150" fill="#159393" /><rect x="1050" y="150" width="150" height="150" fill="#918b3b" /></g></svg>
          <p>
          More <a href="heath/">information</a> on code, color-values and more &hellip;.
          </p>

          <h3 id="cave" class="mtm"><a href="cave">Cave</a><svg class="new-theme-svg"><use xlink:href="#NewTheme" /></svg></h3>
          <p>
          Base color for Cave is violet, and although the colors are regularly spaced out, there is no real green in here, (<i>see also “Plateau”</i>) a “cool-warm” palette; not for the claustrophobic.
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect x="0" y="0" width="150" height="150" fill="#19171c" /><rect x="150" y="0" width="150" height="150" fill="#26232a" /><rect x="300" y="0" width="150" height="150" fill="#585260" /><rect x="450" y="0" width="150" height="150" fill="#655f6d" /><rect x="600" y="0" width="150" height="150" fill="#7e7887" /><rect x="750" y="0" width="150" height="150" fill="#8b8792" /><rect x="900" y="0" width="150" height="150" fill="#e2dfe7" /><rect x="1050" y="0" width="150" height="150" fill="#efecf4" /><rect x="0" y="150" width="150" height="150" fill="#a06e3b" /><rect x="150" y="150" width="150" height="150" fill="#aa573c" /><rect x="300" y="150" width="150" height="150" fill="#be4678" /><rect x="450" y="150" width="150" height="150" fill="#bf40bf" /><rect x="600" y="150" width="150" height="150" fill="#955ae7" /><rect x="750" y="150" width="150" height="150" fill="#576ddb" /><rect x="900" y="150" width="150" height="150" fill="#398bc6" /><rect x="1050" y="150" width="150" height="150" fill="#2a9292" /></g></svg>

          <p>
          More <a href="cave/">information</a> on code, color-values and more &hellip;.
          </p>


          <h3 id="sulphurpool" class="mtm"><a href="sulphurpool">Sulphurpool</a><svg class="new-theme-svg"><use xlink:href="#NewTheme" /></svg></h3>
          <p>
          Base color for sulphurpool is purple, and here the background-colors have these grey purplish colors for the background. Darkest background-color needed not to be as desaturated as some of the warmer palettes, giving this colorscheme it’s otherworldly character. Yellow and green are close, because of avoidance of too greenish hues. In all: easy on the eye.
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect x="0" y="0" width="150" height="150" fill="#202746" /><rect x="150" y="0" width="150" height="150" fill="#293256" /><rect x="300" y="0" width="150" height="150" fill="#5e6687" /><rect x="450" y="0" width="150" height="150" fill="#6b7394" /><rect x="600" y="0" width="150" height="150" fill="#898ea4" /><rect x="750" y="0" width="150" height="150" fill="#979db4" /><rect x="900" y="0" width="150" height="150" fill="#dfe2f1" /><rect x="1050" y="0" width="150" height="150" fill="#f5f7ff" /><rect x="0" y="150" width="150" height="150" fill="#c08b30" /><rect x="150" y="150" width="150" height="150" fill="#c76b29" /><rect x="300" y="150" width="150" height="150" fill="#c94922" /><rect x="450" y="150" width="150" height="150" fill="#9c637a" /><rect x="600" y="150" width="150" height="150" fill="#6679cc" /><rect x="750" y="150" width="150" height="150" fill="#3d8fd1" /><rect x="900" y="150" width="150" height="150" fill="#22a2c9" /><rect x="1050" y="150" width="150" height="150" fill="#ac9739" /></g></svg>
          <p>
          More <a href="sulphurpool/">information</a> on code, color-values and more &hellip;.
          </p>



          <h3 id="lakeside" class="mtm"><a href="lakeside">Lakeside</a></h3>
          <p>
          Base color for Lakeside is blue, which means bluish colors for the background. Coolest colorscheme of the bunch, works very well in the light-background variant, for example on a webpage (<i>with Prism, or Higlight.js, e.g.</i>).
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect  x="0" y="0" width="150" height="150" fill="#161b1d" /><rect  x="150" y="0" width="150" height="150" fill="#1f292e" /><rect  x="300" y="0" width="150" height="150" fill="#516d7b" /><rect  x="450" y="0" width="150" height="150" fill="#5a7b8c" /><rect  x="600" y="0" width="150" height="150" fill="#7195a8" /><rect  x="750" y="0" width="150" height="150" fill="#7ea2b4" /><rect  x="900" y="0" width="150" height="150" fill="#c1e4f6" /><rect  x="1050" y="0" width="150" height="150" fill="#ebf8ff" /><rect  x="0" y="150" width="150" height="150" fill="#8a8a0f" /><rect  x="150" y="150" width="150" height="150" fill="#935c25" /><rect  x="300" y="150" width="150" height="150" fill="#d22d72" /><rect  x="450" y="150" width="150" height="150" fill="#b72dd2" /><rect  x="600" y="150" width="150" height="150" fill="#6b6bb8" /><rect  x="750" y="150" width="150" height="150" fill="#257fad" /><rect  x="900" y="150" width="150" height="150" fill="#2d8f6f" /><rect  x="1050" y="150" width="150" height="150" fill="#568c3b" /></g></svg>
          <p>
          More <a href="lakeside/">information</a> on code, color-values and more &hellip;.
          </p>

          <h3 id="savanna" class="mtm"><a href="savanna">Savanna</a><svg class="new-theme-svg"><use xlink:href="#NewTheme" /></svg></h3>
          <p>
          Base color for Savanna is green, it has greenish colors for the background. “Color-wheel colors” are desaturated considerably, giving this colorscheme a rather understated appeal and, dear I say it, a ‘natural’ look and feel.</p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect x="0" y="0" width="150" height="150" fill="#171c19" /><rect x="150" y="0" width="150" height="150" fill="#232a25" /><rect x="300" y="0" width="150" height="150" fill="#526057" /><rect x="450" y="0" width="150" height="150" fill="#5f6d64" /><rect x="600" y="0" width="150" height="150" fill="#78877d" /><rect x="750" y="0" width="150" height="150" fill="#87928a" /><rect x="900" y="0" width="150" height="150" fill="#dfe7e2" /><rect x="1050" y="0" width="150" height="150" fill="#ecf4ee" /><rect x="0" y="150" width="150" height="150" fill="#a07e3b" /><rect x="150" y="150" width="150" height="150" fill="#9f713c" /><rect x="300" y="150" width="150" height="150" fill="#b16139" /><rect x="450" y="150" width="150" height="150" fill="#867469" /><rect x="600" y="150" width="150" height="150" fill="#55859b" /><rect x="750" y="150" width="150" height="150" fill="#478c90" /><rect x="900" y="150" width="150" height="150" fill="#1c9aa0" /><rect x="1050" y="150" width="150" height="150" fill="#489963" /></g></svg>

          <p>
          More <a href="savanna/">information</a> on code, color-values and more &hellip;.
          </p>



          <h3 id="seaside" class="mtm"><a href="seaside">Seaside</a></h3>
          <p>
          Base color for Seaside is green: greenish colors for the background. Very saturated color-palette; comes popping at you.
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect  x="0" y="0" width="150" height="150" fill="#131513" /><rect  x="150" y="0" width="150" height="150" fill="#242924" /><rect  x="300" y="0" width="150" height="150" fill="#5e6e5e" /><rect  x="450" y="0" width="150" height="150" fill="#687d68" /><rect  x="600" y="0" width="150" height="150" fill="#809980" /><rect  x="750" y="0" width="150" height="150" fill="#8ca68c" /><rect  x="900" y="0" width="150" height="150" fill="#cfe8cf" /><rect  x="1050" y="0" width="150" height="150" fill="#f4fbf4" /><rect  x="0" y="150" width="150" height="150" fill="#98981b" /><rect  x="150" y="150" width="150" height="150" fill="#87711d" /><rect  x="300" y="150" width="150" height="150" fill="#e6193c" /><rect  x="450" y="150" width="150" height="150" fill="#e619c3" /><rect  x="600" y="150" width="150" height="150" fill="#ad2bee" /><rect  x="750" y="150" width="150" height="150" fill="#3d62f5" /><rect  x="900" y="150" width="150" height="150" fill="#1999b3" /><rect  x="1050" y="150" width="150" height="150" fill="#29a329" /></g></svg>

          <p>
          More <a href="seaside/">information</a> on code, color-values and more &hellip;.
          </p>

          <h3 id="estuary" class="mtm"><a href="estuary">Estuary</a><svg class="new-theme-svg"><use xlink:href="#NewTheme" /></svg></h3>
          <p>
          Base color for Estuary is yellow-green, no real blue, red or purple in here, (<i>red goes to the orange</i>), only the yellow/greenish colors are saturated. Colors are all very close in terms of (mid-range) tonal-contrast (‘“grey value”). A bit of a poisonous colorscheme, be aware of the crocodiles &hellip;, they’re hiding in there.
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect x="0" y="0" width="150" height="150" fill="#22221b" /><rect x="150" y="0" width="150" height="150" fill="#302f27" /><rect x="300" y="0" width="150" height="150" fill="#5f5e4e" /><rect x="450" y="0" width="150" height="150" fill="#6c6b5a" /><rect x="600" y="0" width="150" height="150" fill="#878573" /><rect x="750" y="0" width="150" height="150" fill="#929181" /><rect x="900" y="0" width="150" height="150" fill="#e7e6df" /><rect x="1050" y="0" width="150" height="150" fill="#f4f3ec" /><rect x="0" y="150" width="150" height="150" fill="#a5980d" /><rect x="150" y="150" width="150" height="150" fill="#ae7313" /><rect x="300" y="150" width="150" height="150" fill="#ba6236" /><rect x="450" y="150" width="150" height="150" fill="#9d6c7c" /><rect x="600" y="150" width="150" height="150" fill="#5f9182" /><rect x="750" y="150" width="150" height="150" fill="#36a166" /><rect x="900" y="150" width="150" height="150" fill="#5b9d48" /><rect x="1050" y="150" width="150" height="150" fill="#7d9726" /></g></svg>
          <p>
          More <a href="estuary/">information</a> on code, color-values and more &hellip;.
          </p>

          <h3 id="dune" class="mtm"><a href="dune">Dune</a></h3>
          <p>
          Base color for Dune is yellow, and then warm yellowish brown greyed colors for the background. A welcoming, soothing friendly but also bright, colorscheme.
          </p>

          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 300"><g><rect x="0" y="0" width="150" height="150" fill="#20201d" /><rect x="150" y="0" width="150" height="150" fill="#292824" /><rect x="300" y="0" width="150" height="150" fill="#6e6b5e" /><rect x="450" y="0" width="150" height="150" fill="#7d7a68" /><rect x="600" y="0" width="150" height="150" fill="#999580" /><rect x="750" y="0" width="150" height="150" fill="#a6a28c" /><rect x="900" y="0" width="150" height="150" fill="#e8e4cf" /><rect x="1050" y="0" width="150" height="150" fill="#fefbec" /><rect x="0" y="150" width="150" height="150" fill="#ae9513" /><rect x="150" y="150" width="150" height="150" fill="#b65611" /><rect x="300" y="150" width="150" height="150" fill="#d73737" /><rect x="450" y="150" width="150" height="150" fill="#d43552" /><rect x="600" y="150" width="150" height="150" fill="#b854d4" /><rect x="750" y="150" width="150" height="150" fill="#6684e1" /><rect x="900" y="150" width="150" height="150" fill="#1fad83" /><rect x="1050" y="150" width="150" height="150" fill="#60ac39" /></g></svg>

          <p>
          More <a href="dune">information</a> on code, color-values and more &hellip;.
          </p>


          <h3 id="downloads" class="mtm">Downloads</h3>
          <p>All downloads can be <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output">found in the output</a> folder.</p>
          <p class="note">
          Note: For Sublime Text, go to <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output/textmate">Textmate folder</a>, or <a href="https://github.com/atelierbram/syntax-highlighting/tree/master/atelier-schemes/output/textmate/textmate.zip">download the zip-file directly</a>.</p>

          <p>For <a href="https://github.com/tpope/vim-pathogen">Vim with Pathogen</a> you can clone <a href="https://github.com/atelierbram/vim-colors_atelier-schemes">the dedicated repo for this purpose</a> in the <code>~/.vim/bundle</code> directory like so:</p>

                    <pre class="language-bashrc"><code class="language-bash">
          cd ~/.vim/bundle
          git clone https://github.com/atelierbram/vim-colors_atelier-schemes.git
                    </code></pre>

          <pre class="language-bash" style="background:#ebf8ff;color:#516d7b;padding:1em;border:1px solid #d6eefb"><code class="language-bash" style="background:#ebf8ff;color:#516d7b">
cd <span style="color:#935c25">~</span><span style="color:#935c25">/</span><span class="token punctuation">.</span>vim<span style="color:#935c25">/</span>bundle
git clone https<span class="token punctuation">:</span><span style="color:#935c25">/</span><span class="token operator" style="color:#935c25">/</span>github<span class="token punctuation">.</span>com<span style="color:#935c25">/</span>atelierbram<span style="color:#935c25">/</span>vim<span style="color:#935c25">-</span>colors_atelier<span style="color:#935c25">-</span>schemes<span class="token punctuation">.</span>git
          </code></pre>



          <h3 id="demo" class="mtm">Demo</h3>
          <ul>
            <li><a href="http://atelierbram.github.io/syntax-highlighting/atelier-schemes/demo/highlight-js.html">Demo for Highlight.js</a></li>
           <li><a href="http://atelierbram.github.io/syntax-highlighting/atelier-schemes/demo/prettify">Demo for <i>(Google Code)</i> Prettify</a></li>
            <li><a href="http://atelierbram.github.io/syntax-highlighting/prism">Demo for Prism</a></li>
          </ul>

          <h3 id="#lab" class="mtm">Lab</h3>
          <ul>
            <li><a href="http://codepen.io/atelierbram/pen/JnbIt">Colorscheme Lab on CodePen</a></li>
            <li><a href="https://gist.github.com/atelierbram/6283373">Colorscheme Lab as Github Gist</a></li>
          </ul>

          <h3 id="credits" class="mtm">Credits</h3>
          <ul class="inline-block-list">
            <li>Credits to <a href="http://ethanschoonover.com/solarized">Ethan Schoonover</a>  whose <a href="http://github.com/altercation/solarized">Solarized colorscheme</a> was a model for these colorschemes</li>
            <li>And credits to <a href="http://chriskempson.com/">Chris Kempson</a>, whose <a href="https://github.com/chriskempson/base16-builder">Base16 Builder</a>  was used for conversion to the different output formats. It&#8217;s a remarkable building tool, and I would also recommend trying out <a href="https://github.com/chriskempson/base16">the colorschemes</a> he made with them.</li>
          </ul>

          <p><a href="#header" class="go-to-top sh-button"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
              <g id="outline-black">
              <path opacity="0.5" d="M25,3L3,34l12-1v13h20V33l12,1L25,3z"/>
              </g>
              <g id="inner-white">
              <polygon fill="#FFFFFF" points="42,31 25,7 8,31 18,30 18,44 32,44 32,30 	"/>
              </g>
            </svg><span class="up-arrow">&#11014;</span>
            <span class="visuallyhidden">Go to Top</span></a></p>

        </div>
      </article>

      <footer class="page-footer">
        <div class="large-12 columns">
          <div class="row">
            <div class="large-8 columns">
              <p id="license" class="copyright">&copy; 2013 <a href="http://atelierbramdehaan.nl/" class="underline">Atelier Bram de Haan</a>, Released under <a href="http://atelierbram.mit-license.org" class="underline">MIT License</a></p>
            </div>
            <div class="large-4 columns">

              <a href="https://github.com/atelierbram/syntax-highlighting" class="sh-button">This repo on Github</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <script>
document.write('<script src=' +
    ('__proto__' in {} ? '../assets/js/vendor/jquery' : '../assets/js/vendor/zepto.min') +
    '.js><\/script>')
    </script>
    <script src="../assets/js/foundation/foundation.min.js"></script>
    <script src="../assets/js/foundation/foundation.dropdown.min.js"></script>
    <script src="../assets/js/foundation/foundation.section.min.js"></script>
    <script>$(document).foundation();</script>
    <script src="../assets/js/vendor/custom.modernizr.js"></script>

    <script>function insertTopborder() { $('<div class="rainbow-border"><span class="yellow-background"></span><span class="orange-background"></span><span class="red-background"></span><span class="magenta-background"></span><span class="violet-background"></span><span class="blue-background"></span><span class="cyan-background"></span><span class="green-background"></span></div>').insertBefore('#wrap'); } insertTopborder();</script></body>
    </html>
